import Page3 from '@/views/Page3';
import Page4 from '@/views/Page4';
import React from 'react';
import { lazy, Suspense } from 'react';
// Navigate重定向组件
import { Navigate } from 'react-router-dom';
import Login from '@/views/Login';
const About = lazy(() => import('@/views/About'));
const Home = lazy(() => import('@/views/Home'));
const Page1 = lazy(() => import('@/views/Page1'));
const Page2 = lazy(() => import('@/views/Page2'));
// lazy加载的模式，需要添加一个loading组件
const withLoadingComponent = (comp: JSX.Element) => {
  return <Suspense fallback={<div>Loading...</div>}>{comp}</Suspense>;
};

const routes = [
  {
    path: '/',
    element: <Navigate to="/page1" />,
  },
  {
    path: '/',
    element: <Home />,
    children: [
      {
        path: '/page1',
        element: withLoadingComponent(<Page1 />),
      },
      {
        path: '/page2',
        element: withLoadingComponent(<Page2 />),
      },
      {
        path: '/page3',
        element: withLoadingComponent(<Page3 />),
      },
      {
        path: '/page4',
        element: withLoadingComponent(<Page4 />),
      },
    ],
  },
  //   嵌套路由结束
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '*',
    element: <Navigate to="/page1" />,
  },
];

export default routes;
